﻿<!DOCTYPE html>
<!----------------------------------------------------------
 
	Copyright (c) 2015 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
	
------------------------------------------------------------>
<html>
<head>
	<title>OL3-ext: Pirates</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="ol.control.PirateMap adds an old map effect on a canvas renderer with a parchment texture and compass." />
	<meta name="keywords" content="ol3, control, canvas, pirate, compass, effect" />

	<link rel="stylesheet" href="style.css" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- OL3 -->
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
	<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- -->
	<link rel="stylesheet" href="../control/piratecontrol.css" />
	<script type="text/javascript" src="../control/piratecontrol.js"></script>

	<style>
		#map
		{	position: fixed;
			top:5em;
			left: 0;
			right: 0;
			bottom: 0;
			width:100%;
			background:transparent;
		}
		.options 
		{	position:fixed;
			top:6em;
			right:1em;
			margin:0;
			max-width:15%;
			min-width:200px;
		}
		.options input[type="number"]
		{	width: 5em;
		}
	</style>

</head>
<body >
	<a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; z-index:10; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>forkme_right_darkblue_121621.png"></a>

	<a href="../index.html">
		<h1>OL3-ext: Pirates!</h1>
	</a>

	<!-- Map div -->
	<div id="map" ></div>

	<div class="options">
		The <i>ol.control.PirateMap</i> adds an old map effect on a canvas renderer.
		It colors the map, adds a parchment texture and compass onto the map.
		<h2>Options</h2>
		<ul>
			<li>
				Hue:
				<select onchange="ctrl.hue= this.value; map.renderSync()">
					<option value="#963">default</option>
					<option value="#369">blue</option>
					<option value="#936">red</option>
					<option value="#396">green</option>
				</select>
			</li>
			<li>
				Saturation:
				<input type="number" value="0.6" onchange="ctrl.saturation= Number(this.value); map.renderSync()" max="1" min="0" step="0.1" />
			</li>
			<li>
				Opacity:
				<input type="number" value="0.7" onchange="ctrl.opacity= Number(this.value); map.renderSync()" max="1" min="0" step="0.1" />
			</li>
		</ul>
	</div>


	<script type="text/javascript">

		// The map
		var map = new ol.Map
			({	target: 'map',
				view: new ol.View
				({	zoom: 14,
					center: [-302537, 6001071]
				}),
				layers: [new ol.layer.Tile(
					{	name: "OSM",
						source: new ol.source.OSM(),
						visible: true
					})]
			});
		map.getView().fit ([-375917, 5976764, -229158, 6025378], map.getSize());

		var ctrl = new ol.control.PirateMap();
		map.addControl(ctrl);
	</script>

</body>
</html>